<div id="main" >
	<div class="palm-page-header">
		<div class="header-icon mojotracker-icon32"></div>
		<div class="header-text">
			<span x-mojo-loc=''><span class="i18n">Track</span> <span id="info_currentTrack" >&nbsp;</span></span>
		</div>
	</div>

	<div class="palm-group">
		<div class="palm-group-title">
			<span class="i18n">Information</span>
		</div>

		<div class="tracker-line " style="">
			<div class="tracker-line-header"><span class="i18n">Start</span></div>
            <div class="tracker-value">
                <span id="info_startTime" >&nbsp;</span>
            </div>
		</div>

		<div class="tracker-line " style="">
			<div class="tracker-line-header"><span class="i18n">End</span></div>
            <div class="tracker-value">
                <span id="info_endTime" >&nbsp;</span>
            </div>
		</div>

		<div class="tracker-line indent" >
            <div style="position:absolute; left:0%; width:40%">
                <div class="tracker-line-header"><span class="i18n">Track length</span></div>
                <div class="tracker-value">
                    <div id="info_trackLength" >&nbsp;</div>
                </div>
            </div>
            <div style="position:absolute; left:40%; width:44%" >
                <div class="tracker-line-header"><span class="i18n">Maximum speed</span></div>
                <div class="tracker-value">
                    <div id="info_maxSpeed" >&nbsp;</div>
                </div>
            </div>
            <div style="position:absolute; left:85%; width:20%">
                <div class="tracker-line-header"><span class="i18n">Nodes</span></div>
                <div class="tracker-value">
                    <div id="info_tracknum" >&nbsp;</div>
                </div>
            </div>
            &nbsp;
		</div>

		<div class="tracker-line indent" style="">
			<div class="tracker-line-header"><span class="i18n">Minimum / maximum altitude</span></div>
            <div class="tracker-value">
                <span id="info_minAltitude" >&nbsp;</span> /
                <span id="info_maxAltitude" >&nbsp;</span>
            </div>
		</div>

    </div>

	<div class="palm-list">
		<div class="palm-row first">
			<div class="palm-row-wrapper">
			<div class="title">
				<span class="i18n">Map Preview</span>
			</div>
			<div id="mapStatus" class="preview"><span class="i18n">Map is drawing...</span></div>
			</div>
		</div>
		
		<div style="text-align:center">
			<canvas id="mapCanvas" width="320" height="10" >
				Your browser does not support HTML5 Canvas.
				<img src="" name="map" />
			</canvas>
		</div>
		
		<!--<span id="resolution_debug" >&nbsp;</span>-->
		
		<div class="palm-row ">
			<div class="palm-row-wrapper">
			<div class="title">
				<span class="i18n">Altitude</span>
			</div>
			</div>
		</div>
	
		<canvas id="altitudeCanvas" width="320" height="200" >
			Your browser does not support HTML5 Canvas.
		</canvas>
	
		<div class="palm-row ">
			<div class="palm-row-wrapper">
			<div class="title">
				<span class="i18n">Speed</span>
			</div>
			</div>
		</div>
	
		<canvas id="speedCanvas" width="320" height="200" >
			Your browser does not support HTML5 Canvas.
		</canvas>
	
		<div>
			<div id='editableListContainer'>
				<div id="waypointList" x-mojo-element="List" >
				</div>
			</div>
		</div>
	</div>
</div>
